<template>
  <div class="container-app">
    <div
      class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
    >
      <div class="mui-scroll">
        <a class="mui-control-item mui-active" @click="getall">全部</a>
        <a class="mui-control-item">热点</a>
        <a class="mui-control-item">北京</a>
        <a class="mui-control-item">社会</a>
        <a class="mui-control-item">娱乐</a>
        <a class="mui-control-item">科技</a>
      </div>
    </div>
    <ul class="photo-list" @click='info'>
      <li v-for="item in  tiList" :key="item.title">
        <img v-lazy="item.thumbnailUrl">
        <div class="info">
          <h1 class="info-title">{{ item.title }}</h1>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
//名字不能乱起 mui
import mui from "../../lib/mui/js/mui.min.js";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      tiList: []
    };
  },
  created() {
    this.getall();
  },
  mounted() {
    mui("#mui-scroll-wrapper").scroll({
      scrollX: true, //是否横向滚动
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
    getall() {
      this.$http
        .post("http://api.wangshuwen.com/getBeautyImages?page=3")
        .then(result => {
          if (result.status == 200) {
            this.tiList = result.body.data.imgs;
            // console.log(this.tiList);
          } else {
            Toast("获取失败");
          }
        })
        .catch(err => {
          //捕获错误 解决 Uncaught (in promise) 报错
          console.log(err);
        });
    },
    info (e) {
      var e = e || window.event;
      //事件函数的第一个参数是 event
      // console.log(e.target);
      // console.log(e.target.getAttribute('src'));
      this.$router.push({ name : "photosInfo" , params : { src : 'http://imgt6.bdstatic.com/it/u=2,793344775&fm=25&gp=0.jpg'}})
    }
  }
};
</script>
<style>
.container-app {
  margin: 50px 0px;
}
img[lazy="loading"] {
  width: 100%;
  margin: auto;
  /* //自定义样式 这个就是懒加载时的样式 */
 /* background: url('../../images/1.jpg') center no-repeat;  */

}
img {
  width: 100%;
}
.photo-list {
    text-align: center;
  padding: 0 20px;
  margin: 0 0 52px 0;
  list-style: none;
  background: rgba(200, green, blue, 0.4);
}
.photo-list > li {
  position: relative;
  width: 100%;
}
.info {
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 90px;
 background-color: rgba(0, 0, 0, 0.4);
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-title {
    font-size: 20px;
}
</style>
